<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>后台登录</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        /* 让页面所有元素的padding和margin都设置为0 */
        *{margin:0;padding:0;box-sizing:border-box;}
        /* 设置背景图，字体设置为微软雅黑 */
        body{font-family: "微软雅黑", sans-serif;}
        /* 引用图片高度设置为28px，就是页面最上方像屋檐一样的黑色图 */
        .headtop{height:28px;}
        /* 整个登录框的css，并使用绝对定位居中 */
        .login {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -150px 0 0 -150px;
            width:300px;
            height:300px;
        }
        /* 前面分析过的h1标签的css，text-shadow设置阴影使文字更好看，letter-spacing设置字符间距 */
        .login h1 { color:#555555; text-shadow: 0px 10px 8px #CDC673; letter-spacing:2px;text-align:center;margin-bottom:20px; }
        /* 两个输入框的css，border属性设置边框线粗细以及颜色，border-radius设置边框的圆角角度 */
        input{
            padding:10px;
            width:100%;
            color:white;
            margin-bottom:10px;
            background-color:#555555;
            border: 1px solid black;
            border-radius:4px;
            letter-spacing:2px;
        }
        /* 登录按钮的css，cursor:pointer当鼠标移到按钮上面时变成小手形状 */
        form button{
            width:100%;
            padding:10px;
            background-color:#CDC673;
            border:1px solid black;
            border-radius:4px;
            cursor:pointer;
        }
    </style>
    <script  type="text/javascript">
        function flush() {
            $("#codePic").attr("src","{:url('index/verify')}?flag="+Math.random());
        }
        $(function(){
            $("#submit").click(function(){
                var username = $("#user").val();
                var password = $("#password").val();
                var $captcha = $("#captcha").val();
                $.post('login/login',{username:username,password:password,captcha:$captcha},function(json){
                    if (json.code === 1) {
                        // alert("登录成功");
                        window.location.href = 'firstpage';
                    } else {
                        alert(json.msg);
                    }
                    flush();
                },"json");
            });
        });
    </script>
</head>
<body>
<div class="headtop"></div>
<div class="login">
    <h1>Login</h1>
    <form action="" method="get">
        <table width="300px">
            <tr>
                <td colspan="2"><input type="text" id="user" name="user" placeholder="用户名" required="required"></td>
            </tr>
            <tr>
                <td colspan="2"><input type="password" id="password" name="password" placeholder="密  码" required="required"></td>
            </tr>
            <tr>
                <td><input type="text" id="captcha" name="captcha" placeholder="验证码" required="required"></td>
                <td><img  id="codePic" src="{:url('index/verify')}" alt="验证码" onclick="flush()"></td>
            </tr>
            <tr>
                <td colspan="2"><button id="submit" type="button">登录</button></td>
            </tr>
            <tr>
                <td colspan="2" align="right">
                    <a href="register">去注册</a>
                </td>
            </tr>
        </table>
    </form>
</div>
</body>
</html>